<template>
	<view class="success">
		<view class="image"><u-icon name="checkmark" color="#fff" size="60"></u-icon></view>
		<view class="title">加密成功</view>
		<view class="desc">复制下方表情密语，发送给好友</view>
		<view class="emoji">{{ ciphertext }}</view>

		<view class="btnList">
			<view @click="copy" class="primary">复制</view>
			<u-button :custom-style="shareBtnStyle" open-type="share" :hair-line="false" hover-class="none">转发</u-button>
		</view>
	</view>
</template>

<script>
import { encodeEmoji } from '@/utils/emoji.js';
import { setClipboardData } from '@/utils/clipBoard.js';

export default {
	onLoad(option) {
		this.ciphertext = encodeEmoji(option.ciphertext);
	},
	data() {
		return {
			shareBtnStyle: {
				'background-color': '#eee',
				color: '#19be6b',
				'font-weight': 'bold',
				'text-align': 'center',
				height: '72rpx',
				padding: '0rpx 120rpx',
				'border-radius': '8rpx',
				'margin-top': '20rpx',
				border: 'none'
			},
			ciphertext: ''
		};
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			return {
				imageUrl: '/static/assets/shareBg.jpg',
				title: '收到一句密语',
				path: '/pages/index/index?ciphertext=' + this.ciphertext
			};
		} else if (res.from === 'menu') {
			return {
				imageUrl: '/static/assets/shareBg.jpg',
				title: '您的隐私保护助手',
				path: '/pages/index/index'
			};
		}
	},
	methods: {
		toast(msg) {
			uni.showToast({
				icon: 'none',
				title: msg
			});
		},
		copy() {
			setClipboardData(this.ciphertext).then(() => {
				this.toast('复制成功');
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.success {
	display: flex;
	flex-direction: column;
	align-items: center;

	.image {
		margin-top: 60rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #19be6b;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		margin-top: 40rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.desc {
		margin-top: 30rpx;
		font-size: 30rpx;
	}

	.emoji {
		margin-top: 30rpx;
		font-size: 40rpx;
	}

	.btnList {
		position: absolute;
		bottom: 120rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.primary {
			background-color: #19be6b;
			color: #fff;
			font-weight: bold;
			text-align: center;
			height: 72rpx;
			line-height: 72rpx;
			padding: 0 120rpx;
			border-radius: 8rpx;
			margin-top: 20rpx;
		}
	}
}
</style>
